<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>商品管理 - 优选商城</title>
    <style th:fragment="style">
        .product-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
        }
        .btn-action {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>商品管理</h2>
                <a th:href="@{/admin/products/add}" class="btn btn-primary">
                    <i class="bi bi-plus-lg"></i> 添加商品
                </a>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>图片</th>
                                    <th>名称</th>
                                    <th>分类</th>
                                    <th>价格</th>
                                    <th>库存</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="product : ${products}">
                                    <td th:text="${product.id}"></td>
                                    <td>
                                        <img th:if="${product.imageUrl}" th:src="${product.imageUrl}" class="product-image" alt="商品图片">
                                        <span th:unless="${product.imageUrl}" class="text-muted">无图片</span>
                                    </td>
                                    <td th:text="${product.name}"></td>
                                    <td th:text="${product.categoryName}"></td>
                                    <td th:text="${product.price}"></td>
                                    <td th:text="${product.stock}"></td>
                                    <td>
                                        <span th:if="${product.status == 1}" class="badge bg-success">上架</span>
                                        <span th:unless="${product.status == 1}" class="badge bg-secondary">下架</span>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <a th:href="@{/admin/products/{id}/edit(id=${product.id})}" class="btn btn-sm btn-outline-primary btn-action">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteProduct(this)" th:data-id="${product.id}">
                                                <i class="bi bi-trash"></i> 删除
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 更新商品状态
        function updateStatus(id, status) {
            $.post('/admin/products/status/' + id, {status: status}, function(res) {
                if (res.code === 0) {
                    showSuccess('更新成功');
                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                } else {
                    showError(res.msg || '删除失败');
                }
            });
        }
    </script>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个商品吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">确定删除</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 